<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>13-Vue中的JS动画与Velocity.js的结合</title>
	<script src="vue.js"></script>
	<script src='velocity.min.js'></script>
</head>

<body>
	<div id="app">
		<transition 
			@before-enter="handleBeforeEnter"
			@enter="handleEnter"
			@after-enter="handleAfterEnter"
			@before-leave="handleBeforeLeave"
			@leave="handleLeave"
			@after-leave="handleAfterLeave"
		>
			<div v-show="show">hello world</div>
		</transition>
		<button @click='clickMethod'>toggle</button>
	</div>
</body>
<script>
	var vm=new Vue({
		el:'#app',
		data:{
			show:true
		},
		methods:{
			clickMethod:function(){
				this.show=!this.show;
			},
			handleBeforeEnter:function(el){
				el.style.opacity=0;
			},
			handleEnter:function(el,done){
				Velocity(el,{opacity:1},{duration:2000,complete:done})
			},
			handleAfterEnter:function(el){
				
			},
			handleBeforeLeave:function(el){
				el.style.opacity=1;
			},
			handleLeave:function(el,done){
				Velocity(el,{opacity:0},{duration:2000,complete:done})
			},
			handleAfterLeave:function(el){
				
			}
		}
	})
</script>
</html>